<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-vh-100 d-flex flex-column">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle me-2" width="40" height="40">
                <span class="font-bold text-primary">眼底随访系统</span>
            </a>
            <div class="navbar-nav ms-auto">
                <span class="nav-item nav-link">欢迎，{{ admin }}！</span>
                <a class="nav-item nav-link text-danger" href="/admin/logout">退出</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow-1 container my-5">
        <div class="card w-100 max-w-5xl mx-auto p-6 shadow-lg rounded-xl fade-up" style="animation-delay: 0.1s">
            <h2 class="mb-6 text-center text-xl font-bold text-primary">管理员后台</h2>

            <div class="mb-8 fade-up" style="animation-delay: 0.2s">
                <h3 class="mb-4 text-lg font-semibold text-gray-700">用户管理</h3>
                <form method="post" action="/admin/add_user" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-3 fade-up" style="animation-delay: 0.3s">
                            <input type="text" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" name="username" placeholder="用户名" required>
                        </div>
                        <div class="col-md-3 fade-up" style="animation-delay: 0.4s">
                            <input type="password" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" name="password" placeholder="密码" required>
                        </div>
                        <div class="col-md-3 fade-up" style="animation-delay: 0.5s">
                            <select class="form-select rounded-full border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300 py-2" name="role" id="role" required>
                                <option value="patient">普通患者</option>
                                <option value="doctor">普通医生</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                        <div class="col-md-3 fade-up" style="animation-delay: 0.6s" id="doctorNameField" style="display: none;">
                            <input type="text" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" name="doctor_name" placeholder="医生名称">
                        </div>
                    </div>
                    <div class="row g-3 mt-3">
                        <div class="col-md-3 offset-md-9 fade-up" style="animation-delay: 0.6s">
                            <button type="submit" class="btn btn-primary rounded-full w-100 py-2 hover:shadow-lg transition-all duration-300">添加用户</button>
                        </div>
                    </div>
                </form>

                <script>
                    // 监听角色选择变化，动态显示/隐藏医生名称字段
                    document.getElementById('role').addEventListener('change', function() {
                        const doctorNameField = document.getElementById('doctorNameField');
                        if (this.value === 'doctor') {
                            doctorNameField.style.display = 'block';
                            doctorNameField.querySelector('input').required = true;
                        } else {
                            doctorNameField.style.display = 'none';
                            doctorNameField.querySelector('input').required = false;
                        }
                    });

                    // 初始检查，确保页面加载时显示正确的字段
                    document.addEventListener('DOMContentLoaded', function() {
                        const roleSelect = document.getElementById('role');
                        const doctorNameField = document.getElementById('doctorNameField');
                        if (roleSelect.value === 'doctor') {
                            doctorNameField.style.display = 'block';
                            doctorNameField.querySelector('input').required = true;
                        }
                    });
                </script>

                <div class="overflow-x-auto fade-up" style="animation-delay: 0.7s">
                    <table class="table table-striped rounded-lg overflow-hidden shadow-sm bg-white">
                        <thead class="bg-primary text-white">
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>角色</th>
                            <th>医生名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for user in users %}
                            <tr class="hover:bg-blue-50 transition-colors duration-200">
                                <td>{{ user.id }}</td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.role }}</td>
                                <td>{{ user.doctor_name if user.doctor_name else '-' }}</td>
                                <td>
                                    <form method="post" action="/admin/delete_user" onsubmit="return confirm('确定要删除用户 {{ user.username }} 吗？')">
                                        <input type="hidden" name="user_id" value="{{ user.id }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger rounded-full px-4 py-1 hover:shadow-md transition-all duration-300">删除</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="fade-up" style="animation-delay: 0.8s">
                <h3 class="mb-4 text-lg font-semibold text-gray-700">所有随访记录</h3>
                <div class="overflow-x-auto">
                    <table class="table table-striped rounded-lg overflow-hidden shadow-sm bg-white">
                        <thead class="bg-primary text-white">
                        <tr>
                            <th>记录编号</th>
                            <th>患者</th>
                            <th>医生</th>
                            <th>日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for record in records %}
                            <tr class="hover:bg-blue-50 transition-colors duration-200">
                                <td>{{ record.id }}</td>
                                <td>{{ record.username }}</td>
                                <td>{{ record.doctor_name }}</td>
                                <td>{{ record.date }}</td>
                                <td>
                                    <a href="/record/{{ record.id }}" class="btn btn-sm btn-outline-primary rounded-full px-4 py-1 hover:shadow-md transition-all duration-300 me-2">查看详情</a>
                                    <form method="post" action="/admin/delete_record" onsubmit="return confirm('确定要删除该随访记录吗？')" style="display: inline;">
                                        <input type="hidden" name="record_id" value="{{ record.id }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger rounded-full px-4 py-1 hover:shadow-md transition-all duration-300">删除</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 shadow-inner">
        <div class="container text-center text-gray-600">
            <p>© 2025 眼底随访系统. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>